<!--
 * Tencent is pleased to support the open source community by making Tars available.
 *
 * Copyright (C) 2016 THL A29 Limited, a Tencent company. All rights reserved.
 *
 * Licensed under the BSD 3-Clause License (the "License"); you may not use this file except
 * in compliance with the License. You may obtain a copy of the License at
 *
 * https://opensource.org/licenses/BSD-3-Clause
 *
 * Unless required by applicable law or agreed to in writing, software distributed
 * under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR
 * CONDITIONS OF ANY KIND, either express or implied. See the License for the
 * specific language governing permissions and limitations under the License.
-->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
    <link rel="stylesheet" href="../css/bootstrap.min.css">
    <link rel="stylesheet" href="../css/bootstrap_datepicker.min.css">
    <link rel="stylesheet" href="../css/style.css">
    <!--[if lt IE 9]>
    <script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    <script src="../js/jquery.min.js"></script>
    <script src="../js/bootstrap.min.js"></script>
    <script src="../js/bootstrap_datepicker.min.js"></script>
    <script src="../js/template.js"></script>
    <script src="../js/common.js"></script>
</head>
<body>
<div class="content">
    <h4 class="sub-header">发布历史</h4>
    <div class="form-horizontal">
        <div class="form-group">
            <div class="col-sm-1"><label class="tr wp100 control-label">开始时间 </label></div>
            <div class="col-sm-2">
                <input type="text" class="form-control date" id="from">
            </div>
            <div class="col-sm-1"><label class="tr wp100 control-label">结束时间 </label></div>
            <div class="col-sm-2">
                <input type="text" class="form-control date" id="to">
            </div>
            <div class="col-sm-1"><button type="button" class="btn btn-primary" id="btn-submit">查询</button></div>
        </div>
    </div>
    <div id="patch-server-list" class="mt10"></div>
</div>


<div id="dlg-ret" style="display:none">

</div>



<script type="text/html" id="task-tpl">
    <table class="table table-bordered" id="task-table">
        <thead>
        <tr>
            <th>任务ID</th>
            <th>是否串行</th>
            <th>任务状态</th>
            <th>子任务详情</th>
        </tr>
        </thead>
        <tbody>
        {{each data as it}}
        <tr class="normal-tr">
            <td>{{it.task_no}}</td>
            <td>{{if it.serial}}是{{else}}否{{/if}}</td>
            <td><span data-status="{{it.status}}" class="status">{{it.status_cn}}</span></td>
            <td><a href="#;" onclick="viewDetail('{{it.task_no}}')">查看</a></td>
        </tr>

        {{/each}}
        </tbody>
        <tfoot>
            <tr><td class="tpage" colspan="4"></td></tr>
        </tfoot>
    </table>
</script>

<script type="text/html" id="sub-task-tpl">
    <table class="table table-bordered" id="sub-task-table">
        <tr>
            <th>子任务ID</th>
            <th>应用</th>
            <th>服务</th>
            <th>节点</th>
            <th>命令</th>
            <th>开始时间</th>
            <th>结束时间</th>
            <th>状态信息</th>
            <th>执行信息</th>
        </tr>
        {{each items as sub}}
        <tr>
            <td>{{sub.item_no}}</td>
            <td>{{sub.application}}</td>
            <td>{{sub.server_name}}</td>
            <td>{{sub.node_name}}</td>
            <td>{{sub.command}}</td>
            <td>{{sub.start_time}}</td>
            <td>{{sub.end_time}}</td>
            <td>{{sub.status_info}}</td>
            <td>{{sub.execute_info}}</td>
        </tr>
        {{/each}}
    </table>
</script>


<script>
    var args = getQueryStringArgs();
    getHistoryList(args.application,args.server_name);

    $('.date').datepicker({format:'yyyy-mm-dd'});


    $('#btn-submit').click(function () {
        var from = $('#from').val(),
            to  =   $('#to').val();
        getHistoryList(args.application,args.server_name,from,to);
    });

    /**
     * 获取历史列表
     * @param {String} application
     * @param {String} server_name
     * @param {String} from
     * @param {String} to
     */
    function getHistoryList(application,server_name,from,to) {
        showLoading();
        var paramObj = {
                application :   application || '',
                server_name :   server_name || '',
                from        :   from        || '',
                to          :   to          || ''
            },
            statusArr = [
                'EM_T_NOT_START',
                'EM_T_RUNNING',
                'EM_T_SUCCESS',
                'EM_T_FAILED',
                'EM_T_CANCEL',
                'EM_T_PARIAL'
            ];
        var param = $.stringify(paramObj);
        $.getJSON('/pages/server/api/task_list',param,function (data) {
            removeLoading();
            if(data.ret_code==200){
                $.each(data.data,function (index,n) {
                    n.status_cn = statusArr[n.status];
                });
                var htmlStr = template('task-tpl',data);
                $('#patch-server-list').html(htmlStr);
                $('#task-table').table();
            }
        });
    }

    /**
     * 切换显示任务详情
     * @param {Element} tar
     */
    function toggleDetail(tar) {
        var $hideTr = $(tar).parents('.normal-tr').next('.hide-tr'),
            $tar = $(tar),
            shown = $(tar).data('show');
        if(shown){
            $hideTr.hide();
            $tar.data('show',false);
            $tar.html('<i class="glyphicon glyphicon-chevron-down"></i>');
        }else{
            $hideTr.show();
            $tar.data('show',true);
            $tar.html('<i class="glyphicon glyphicon-chevron-up"></i>');
        }
    }

    function viewDetail(taskId) {
        var $box = $('#dlg-ret');
        $.getJSON('/pages/server/api/task?task_no='+taskId,function (data) {
            if(data.ret_code==200){
                $box.html(template('sub-task-tpl',data.data));

            }else{
                $box.html('<div class="alert alert-danger">系统出错</div>');
            }
            showDialog($box,'子任务详情',null,1000);
        });
    }
</script>
</body>
</html>
